<template>
  <h2>reactive的使用</h2>
  <h3>名字:{{obj.name}}</h3>
  <h3>年龄:{{obj.age}}</h3>
  <h3>媳妇:{{obj.wife}}</h3>
  <button @click="changeData">测试数据</button>
</template>
<script lang="ts">
import { defineComponent, reactive} from 'vue'
export default defineComponent({
  name: 'App',
  setup() {
    // 目标对象
    const target ={
      name:'小强',
      age:20,
      wife:{
        name:'小甜甜',
        age:20,
        car:['奔驰','奥迪','宝马']
      }
    }
    // 代理对象,返回的是一个Proxy类型的对象
    // reactive用来定义引用类型的响应式数据的方法,ref用来定义基本类型数据的响应式数据
    // reactive响应式数据的变化影响是深层次的
    // 修改代理数据,目标对象的数据是会发生变化的,修改目标数据,代理数据是不会变化的
    const obj = reactive(target)
    const changeData=()=>{
      obj.name+='==='
      obj.wife.name+='==='
      obj.wife.car[1]='奥拓'
      target.name+='==='
      console.log(target.name)
    }
    return {
      obj,
      changeData
    }
  },
})
</script>
